/**
 * 流程图只读模式
 */
import "./../approveStepReadonly.css"
import React, { useRef, useState } from "react";
import clsx from "clsx";
import { Tooltip , Input, Radio, Space, Checkbox, Spin, Skeleton } from "antd";


//编辑模式的依赖项
import { useUpdate } from "ahooks";
import BranchChoose from "./../BranchChoose1";//分支步骤选择
import TemporaryStep from "./../TemporaryStep1";//临时步骤编辑
import AuditorSortable from "./../AuditorSortable1";//串行步骤编辑
import AuditorChoose from "./../AuditorChoose1";//无人步骤选人
import JstempApproveStepsAuditor from "../JstempApproveStepsAuditor";//责任人头像和名字
import { scrollTo } from "../../../framework/common/utils";
import eventBus, { useSubscribe } from "../../../framework/common/eventBus";
import { chooseStep, deleteTemporaryStep, onNodesChange, addTemporaryStep } from "./utility";
/**
 * 步骤信息
 * step:{
 *  needChoose: 0 //值为1时，存在不确定的审批人选择。但是以前的工作流里面是0为存在不确定的审批人，当后续步骤node有多个节点，NodeConfirm为0的时候，说明该步骤责任人不明确
 *  nodes:[] //该步骤的审批人信息
 *  stepAttrs:{
 *      handle_mode: 'Serial' //Serial串行 Parallel并行
 *      multi_type：'Multi' // Single单人步骤 Multi多人步骤
 *      archived_mode: 'Auto', // 归档方式：Auditor-处理人归档，Auto-系统自动归档 
 *      adjust_auditor: false, // 允许调整责任人 true是 | false否
 *      enable_sign: true, // 开启签章，true开启 | false没开启
 *      no_auditor_rules: ["SkipStep"] //一个数组，如果包含了SkipStep，表示无责任人自动跳过
 *      adjust_auditor: true, // 是否可调整责任方 true可 | false不可
 *      adjust_multi_auditor: true, //调整责任人是否可选择多人 true | false
 *  }
 * }
 */

/**
 * props {}
 * tplData
 * params
 * urlPrefix
 * model edit编辑 readonly只读
 * actual_steps 实际的步骤路径，不包含branch确认步骤，返回给后端
 * approveSteps 步骤信息，包含branch确认步骤，展示在界面
 * setLoading 触发父组件loading，用于给确定按钮加loading状态
 * validateResult 首次加载步骤时的错误信息
 * setActual_steps 父组件更新actual_steps步骤信息的状态方法
 * setAllSteps 父组件更新approveSteps步骤信息的状态方法
 * showValidate 显示步骤校验错误信息
 */
 export default function (props) {
    if(!props?.approveSteps?.length){
        return <>
            <Skeleton active />
        </>
    }
    // const injectInfo= useInject()
    //组件依赖数据
    let tplData= props.tplData || {};
    let params = props.params || {};
    let urlPrefix = props.urlPrefix || null; 
    let showValidate = props.showValidate;
    const updater = useUpdate();
    const approveStepsRef= useRef(props.approveSteps || [])
    let approveSteps = approveStepsRef.current;//完整的步骤，包含branch，用于渲染在界面
    const validateResultRef = useRef(props.validateResult || null)
    let validateResult = validateResultRef.current;//步骤校验信息

    const actual_stepsRef= useRef(props.actual_steps || [])
    let actual_steps = actual_stepsRef.current;//不包含branch，用于返回给后端
    let selectStepId = useRef(null);//选中的步骤id
    
    useSubscribe("updateEditStep.update",()=>{
        updater();
    })

    
    window._stepsPath = actual_steps;//iframe流程图需要的流程信息
    
    //流程路径滚动到指定步骤
    useSubscribe("scrollFlowPathView.update", (data)=>{
        scrollTo({
            scrollItemClass: '.steps_item[data-key="' + data.stepId + '"]',
            contentClass: ".js-steps_wrap"
        });
        selectStepId.current = data.stepId;
        updater();
    })

    if (!approveSteps) {
        return null;
    }

    let actual = approveSteps;//用于展示在页面上的步骤信息

    //临时步骤缓存
    const [temporaryStepCache, setTemporaryStepCache] = useState({});
            
    return <div className="edit-steps_wrap js-steps_wrap">
                <div className="steps_wrap">{/*编辑模式 */}
                    <ul className="relative steps_conent">
                        {
                            //遍历步骤信息
                            actual.map(function(item, ind){
                                return <React.Fragment 
                                            key={item.id ? item.id : ind}>
                                            <GetEditStepItem
                                                item={item}
                                                ind={ind}
                                                showValidate={showValidate}
                                                actual={actual}
                                                validateResult={validateResult}
                                                tplData={tplData}
                                                updater={updater}
                                                urlPrefix={urlPrefix}
                                                params={params}
                                                approveSteps={approveSteps}
                                                actual_steps={actual_steps}
                                                canShowFlowMap={props.canShowFlowMap}
                                                approveType={props.approveType}
                                                selectStepId={selectStepId}
                                                setLoading={props.setLoading}
                                                temporaryStepCache={temporaryStepCache}
                                                validateResultRef={validateResultRef}
                                                approveStepsRef={approveStepsRef}
                                                actual_stepsRef={actual_stepsRef}
                                            ></GetEditStepItem>
                                        </React.Fragment>;
                            })
                        }
                        {
                            validateResult
                            && <li className="steps_item last errorStep checkTip">
                                    <div className="item_main">
                                        <JstempApproveStepsIcon
                                            status={100}
                                            tplData={tplData}
                                        ></JstempApproveStepsIcon>
                                        <div className="border_arrow"></div>
                                        <p className="mt-1 mb-1 steps_tag">{validateResult.message}</p>
                                    </div>
                                </li>
                        }
                    </ul>
                </div>
            </div>;
 }

 //获取审批步骤item-编辑模式
 function GetEditStepItem({
    item,
    ind,
    showValidate,
    actual,
    validateResult,
    tplData,
    updater,
    urlPrefix,
    params,
    approveSteps,
    actual_steps,
    canShowFlowMap,
    selectStepId,
    approveType,
    setLoading,
    temporaryStepCache,
    validateResultRef,
    approveStepsRef,
    actual_stepsRef
 }){
    const [branchLoading, setBranchLoading] = useState(false);//获取分支步骤状态
    useSubscribe("setBranchLoading.update", function(data){
        setBranchLoading(data)
    })
    let li = null;
    if(item.branch && item.branch.length){//需要选择分支

        //处理校验class
        let errorStepCls = "";
        if(
            showValidate //触发了步骤校验
        ){
            let hasCheckedBranch = item.branch.filter(function(itemNode){
                return itemNode.chooseed == true;
            });
            if(hasCheckedBranch <= 0){//如果没有选中分支
                errorStepCls = "errorStep checkTip";
            }
        }

        //步骤选择
        li = <>
            <div className="choose_step">请选择步骤</div>
            <li className={
                clsx('steps_item choose_steps_item_wrap', 
                    item.step_type == 8 && 'none', 
                    ind == 0 && 'first', 
                    (ind == actual.length - 1 && actual.length > 1 && !validateResult) &&'last', 
                    errorStepCls)
                }
            >
                <div className="item_main">
                    <JstempApproveStepsIcon
                        status={998}
                        tplData={tplData}
                    ></JstempApproveStepsIcon>
                    <div className="border_arrow"></div>
                    <Spin spinning={branchLoading}>
                        <BranchChoose 
                            ind={ind}
                            item={item}
                            onChange={
                                function({
                                    branchStepIndex,
                                    stepIndex
                                }){
                                    chooseStep({
                                        stepInfo:{
                                            branchStepIndex: branchStepIndex,
                                            stepIndex: stepIndex
                                        },
                                        approveSteps: approveSteps,
                                        actual_steps: actual_steps,
                                        params: params,
                                        tplData: tplData,
                                        approveType: approveType,
                                        setLoading: setLoading,
                                        temporaryStepCache: temporaryStepCache,
                                        validateResultRef: validateResultRef,
                                        approveStepsRef: approveStepsRef,
                                        actual_stepsRef: actual_stepsRef,
                                        selectStepId: selectStepId
                                    });
                                }
                            }
                        ></BranchChoose>
                    </Spin>
                </div>
            </li>
        </>
    }else{
        if(item.temporaryStep){
            //处理校验class
            let errorStepCls = "";
            if(
                showValidate //触发了步骤校验
                &&(
                    item.nodes.length <= 0 //当前步骤没有nodes信息
                    || item.name.trim() === "" //当前步骤没有步骤名称
                )
            ){
                errorStepCls = "errorStep checkTip";//加上错误提示
            }
            li = <li className={clsx("steps_item canHoverStep temporaryStepWrap", errorStepCls)} data-id={item.id}>
                    {
                        /*临时步骤编辑表单*/
                    }
                    <TemporaryStep
                        parentUpdater={updater}
                        urlPrefix={urlPrefix}
                        item={item}
                        tplData={tplData}
                        params={params}
                        ind={ind}
                        approveSteps={approveSteps}
                        actual_steps={actual_steps}
                        temporaryStepCache={temporaryStepCache}
                        approveStepsRef={approveStepsRef}
                        actual_stepsRef={actual_stepsRef}
                        selectStepId={selectStepId}
                        ></TemporaryStep>
                </li>
        }else{
            //处理校验class
            let errorStepCls = "";
            if(
                showValidate //触发了步骤校验
                && item.nodes //当前步骤存在nodes信息
                && item.step_type== 4 //当前步骤类型为未审批的步骤
            ){
                if(item.nodes.length <= 0){//当前步骤没有解析到责任人
                    if(item.stepAttrs.no_auditor_rules.indexOf('SkipStep') < 0){//当前步骤无责任人不可跳过
                        errorStepCls = "errorStep checkTip";//加上错误提示
                    }
                }
                if(errorStepCls === "" && item.nodes.length > 0){//当前步骤存在审批责任人，且没有选中的责任人，就一定要校验选择至少1人
                    let hasCheckedNode = item.nodes.filter(function(itemNode){
                        return itemNode.Checked == true;
                    });
                    if(hasCheckedNode <= 0){//如果没有选中的责任人
                        errorStepCls = "errorStep checkTip";
                    }
                }
            }

            if(
                showValidate //触发了步骤校验
                && item.step_type == 2 //当前步骤类型为归档步骤
                && item.stepAttrs.archived_mode === "Auditor"//且为手动归档
            ){
                let hasCheckedNode = item.nodes.filter(function(itemNode){
                    return itemNode.Checked == true;
                });
                if(hasCheckedNode <= 0){//如果没有选中的责任人
                    errorStepCls = "errorStep checkTip";
                }
            }

            let stepsIcon = null;
            if(item.needChoose && item.nodes.length == 0 && (item.stepAttrs && item.stepAttrs.no_auditor_rules && item.stepAttrs.no_auditor_rules.indexOf('SkipStep') == -1 && !item.stepAttrs.adjust_auditor || (!item.stepAttrs.adjust_auditor && item.step_type == 2))){
                stepsIcon = <JstempApproveStepsIcon
                                status={100}
                                tplData={tplData}
                            ></JstempApproveStepsIcon>;
            }else if(item.status){
                stepsIcon = <JstempApproveStepsIcon
                                status={item.status}
                                item={item}
                                tplData={tplData}
                            ></JstempApproveStepsIcon>;
            }else if(ind == 0){
                stepsIcon = <JstempApproveStepsIcon
                                status={1}
                                tplData={tplData}
                            ></JstempApproveStepsIcon>;
            }else{
                stepsIcon = <JstempApproveStepsIcon
                                status={0}
                                tplData={tplData}
                            ></JstempApproveStepsIcon>;
            }

            let person = null;
            if(item.__needChooseAuditor__){//步骤数据清洗，根据判断得到，只要有这个参数，就是需要选人
                //当前步骤没解析到人，但是允许调整责任人，
                person = <div className="person" key={item.id}>
                    <AuditorChoose 
                        parentUpdater={updater}
                        urlPrefix={urlPrefix}
                        step={item}
                        tplData={tplData}
                        params={params}
                        ind={ind}
                        actual_steps={actual_steps}></AuditorChoose>
                </div>;
            }else if(item.nodes && item.nodes.length){
                if(item.needChoose && item.nodes.length > 1){
                    //<!-- 单人出现多人 -->
                    person = <JstempApproveAuditorChoose
                                    nodes={item.nodes}
                                    step_type={item.step_type}
                                    path={ind}
                                    currentStep={item}
                                    actual_steps={actual_steps}
                                    tplData={tplData}
                                ></JstempApproveAuditorChoose>
                }else if(item.stepAttrs && item.stepAttrs.handle_mode == 'Parallel' && item.stepAttrs.multi_type == 'Multi'){
                    //<!-- 并行 -->
                    person = <JstempApproveAuditorAnd
                                    item={item.nodes}//step.nodes 当前步骤所有审批人
                                    step={item}//当前步骤
                                    path={ind}
                                    step_type={item.step_type}
                                    tplData={tplData}
                                    onNodesChange={onNodesChange}
                                    actual_steps={actual_steps}
                                ></JstempApproveAuditorAnd>
                }else if(item.stepAttrs && item.stepAttrs.handle_mode == 'Serial' && item.stepAttrs.multi_type == 'Multi'){
                    //<!-- 串行 -->
                    person = <AuditorSortable
                                key={item.name}
                                nodes={item.nodes}
                                onNodesChange={onNodesChange}
                                adjust_auditor_order={item.stepAttrs.adjust_auditor_order}
                                p_path={ind}
                                index={ind}
                                path={ind+'.nodes'}
                                step_type={item.step_type}
                                updater={updater}
                                step={item}
                                actual_steps={actual_steps}
                            ></AuditorSortable>
                }else{
                    //<!-- 单人或多人 -->
                    person = <>
                        {
                            item.nodes.map(function(node, ind){
                                return <div key={ind} style={{"marginTop": item.step_type != 1 ? "11px" : "0"}}>
                                            <JstempApproveStepsAuditor
                                                item={node}
                                                ind={ind}
                                                step_type={item.step_type}
                                                tplData={tplData}
                                            ></JstempApproveStepsAuditor>
                                        </div>
                            })
                        }
                    </>
                }
            }

            let steps_tag = null;
            if(item.stepAttrs && item.stepAttrs.adjust_auditor && (item.stepAttrs.no_auditor_rules && item.stepAttrs.no_auditor_rules.indexOf('SkipStep') == -1 || item.stepAttrs.archived_mode == 'Auditor') && (!item.nodes || item.nodes.length == 0)){

            }else if((item.tag && item.step_type != 2) || (item.tag && item.needChoose == 1)){
                steps_tag = <p className="mt-1 mb-1 steps_tag">{item.tag}</p>;
            }

            li = <li className={
                        clsx("steps_item", 
                            canShowFlowMap && "canHoverStep",//开启展开流程图
                            errorStepCls, //校验报错状态
                            item.step_type == 8 && "none",
                            ind == 0 && "first",
                            item.id === selectStepId.current && "active",//选中的流程id
                            (ind == actual.length - 1 && actual.length > 1 && !validateResult) && "last",
                            (item.needChoose && item.nodes.length == 0 && (item.stepAttrs && item.stepAttrs.no_auditor_rules && item.stepAttrs.no_auditor_rules.indexOf('SkipStep') == -1 || item.step_type == 2)) && "checkTip"
                        )
                     }
                     key={item.id}
                     data-key={item.id}
                     onClick={
                        function(){
                            //展示流程图时，才响应点击操作
                            if(canShowFlowMap === true){
                                //点击步骤时，联动定位流程图
                                window._selectrdStepId = [item.id];
                                eventBus.publish("selectFlowMapStep.update");
                                selectStepId.current = item.id;
                                updater();
                            }
                        }
                    }
                 >
                    <div className="item_main">
                        {stepsIcon}
                        <div className="border_arrow"></div>
                        {
                            item.step_type != 1
                            && <div className="step_name">
                                    {
                                        item.step_type == '5'
                                        && <i className="iconfont icon-ziliu subProcessTag"></i>
                                    }
                                    {
                                        (item.tag && item.step_type == 2 && item.needChoose != 1)
                                        ? item.tag
                                        : <>
                                            {
                                                (!item.is_Adjustment && item.stepAttrs && item.stepAttrs.multi_type == 'Multi' && item.stepAttrs.adjust_multi_auditor && item.nodes && item.nodes.length && item.is_user_reset_activity != 1 && ind != 0)
                                                ? <>
                                                    {/*多人步骤 并且允许调整责任人时，要有全选/全不选Checkbox，被控制的全选CheckBox组，在下面的 person 组件内*/}
                                                    <Checkbox 
                                                        className="adjust_multi_auditor" 
                                                        data-path={ind}
                                                        indeterminate={(()=>{
                                                            if(item?.nodes?.length > 0){//当前步骤存在审批责任人，且责任人全选
                                                                let checkedNodes = item.nodes.filter(function(itemNode){
                                                                    return itemNode.Checked === true;
                                                                })
                                                                return checkedNodes.length > 0 && checkedNodes.length != item.nodes.length;//勾选数量大于0且小于总人数，设置半选
                                                            }else{
                                                                return false;
                                                            }
                                                        })()}
                                                        checked={(()=>{
                                                            if(item?.nodes?.length > 0){//当前步骤存在审批责任人，且责任人全选
                                                                return item.nodes.every(function(itemNode){
                                                                    return itemNode.Checked === true;
                                                                })
                                                            }else{
                                                                return false;
                                                            }
                                                        })()}
                                                        onChange={(e)=>{
                                                            item?.nodes && item.nodes.map(function(itemNode){
                                                                itemNode.Checked = e.target.checked;
                                                            })//设置全选反选
                                                            let p_step = actual_steps.find(function(s) {
                                                                return s.id == item.id;
                                                            });
                                                            p_step.nodes = JSON.parse(JSON.stringify(item.nodes));//同步更新 actual_steps
                                                            updater();
                                                        }}
                                                        >
                                                            {item.name}
                                                        </Checkbox>
                                                </>
                                                : <>
                                                    {/*不是多人步骤直接显示步骤名称*/}
                                                    {item.name}
                                                </>
                                            }
                                        </>
                                    }
                            </div>
                        }

                        {person}
                        {steps_tag}
                    </div>
                </li>
        }

        if((tplData.temporaryStepsSetting && 
            (tplData.ApproveSteps.length ? tplData.temporaryStepsSetting.approve : tplData.temporaryStepsSetting.initiated) && 
            actual[ind+1] && item.step_type != 8)
        ){
            /*添加临时步骤 */
            li = <>
                {li}
                <li 
                    className="addTemporaryStep" 
                    onClick={
                        ()=>{
                            addTemporaryStep({
                                dataPath: ind,
                                approveSteps: approveSteps,
                                actual_steps: actual_steps,
                                temporaryStepCache: temporaryStepCache,
                                approveStepsRef: approveStepsRef,
                                selectStepId: selectStepId,
                                actual_stepsRef: actual_stepsRef
                            });
                        }
                    }
                    data-path={ind}>
                        <i className="iconfont icon-tianjia" style={{"fontSize": "14px", "color":"#1990FF"}}></i>
                        添加步骤
                </li>
            </>
        }
    }
    return li
}

//返回步骤icon
//对应原模板 jstemp-approve-steps-icon
function JstempApproveStepsIcon({
    status,
    item,
    tplData
}){
    if (item
        && tplData
        && !tplData.ParentProcess
        && tplData.StepInfo.step_type != 2
        && !(item.CurUserIsPart && item.nodesLength == 1)
        && item.step_define_id != tplData.StepInfo.step_define_id
        && item.anonymous_approval && item.anonymous_approval.Enable
        && item.anonymous_approval.Scopes.indexOf('"operate"') != -1
        && item.anonymous_approval.ExcludedActivityIds.indexOf(tplData.StepInfo.step_define_id) == -1
    ){
        return <>
            <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
            <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-c7cac7">
                <i className="iconfont icon-yinni"></i>
            </i>
        </>
    }else{
        if (status == -3){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-bohui text-color-f86161"></i>
            </>
        }

        if (status == -2){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-zuofei text-color-f86161"></i>
            </>
        }

        if(status == -1){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-zhongzhi1 text-color-f86161"></i>
            </>
        }

        if(status == 0){
            if(item && item.approval_rights && item.approval_rights.indexOf('Vote') != -1 
                && (item.stepAttrs.handle_mode != 'Serial' || [1,2].indexOf(item.nodes[(item.nodesLength || item.nodes.length) - 1].node_status) != -1)){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-c7cac7">
                        <i className="iconfont icon-biaojue"></i>
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-shenpizhong text-color-c7cac7"></i>
                </>
            }
        }

        if (status == 1){
            if(item && item.approval_rights && item.approval_rights.indexOf('Vote') != -1 && (item.stepAttrs.handle_mode != 'Serial' || [1,2].indexOf(item.nodes[(item.nodesLength || item.nodes.length) - 1].node_status) != -1)){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-ff8800">
                        <i className="iconfont icon-biaojue"></i>
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-shenpizhong text-color-ff8800"></i>
                </>
            }
        }

        if(status == 2){
            if(item && item.approval_rights && item.approval_rights.indexOf('Vote') != -1 && (item.stepAttrs.handle_mode != 'Serial' || [1,2].indexOf(item.nodes[(item.nodesLength || item.nodes.length) - 1].node_status) != -1)){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-renmingbeijingtu text-color-ff8800">
                        <i className="iconfont icon-biaojue"></i>
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-shenpizhong text-color-ff8800"></i>
                </>
            }
        }

        if(status == 3){
            if(item && item.voted_status){
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className={"line_icon iconfont icon-renmingbeijingtu " + (item.voted_status == 1 ? "text-color-44b549" : "text-color-f86161")}>
                        {
                            item.voted_status == 1 
                            && <i className="iconfont icon-biaojue-tongyi"></i>
                        }
                        {
                            item.voted_status == 2
                            && <i className="iconfont icon-biaojue-butongyi"></i>
                        }
                    </i>
                </>
            }else{
                return <>
                    <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                    <i data-class="icon-guanbi" className="line_icon iconfont icon-yishenpi text-color-44b549"></i>
                </>
            }
        }
        
        if(status == 100){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-shuo text-color-f86161"></i>
            </>
        }

        if( status == 998){
            return <>
                <i className="line_icon_bg iconfont icon-renmingbeijingtu"></i>
                <i data-class="icon-guanbi" className="line_icon iconfont icon-duobianxing text-color-c7cac7 text-20px top-9px -left-33px"></i>
            </>
        }
    }

}

//选人-单人步骤配置多人时，需要选择一个明确的人
//对应原模板 jstemp-approve-auditor-choose
function JstempApproveAuditorChoose({
    nodes,
    step_type,
    path,
    currentStep,
    actual_steps,
    tplData
}){
    let value = '';//默认值
    nodes.find(function(nodeItem){
        if(nodeItem.Checked == 1){
            value = nodeItem.auditor_id;
            return true;
        }
    });//当前选中的责任人id作为默认值

    return <Radio.Group 
            className="choose_auditor_wrap"
            onChange={(e)=>{
                nodes.map(function(node,index){
                    if(index === e.target['data-nodeind']){//根据选中的索引，更改选中的责任人
                        node.Checked = 1;
                    }else{
                        node.Checked = 0;
                    }
                });

                var p_step = actual_steps.find(function(s) {
                    return s.id == currentStep.id;
                })
                p_step.nodes = JSON.parse(JSON.stringify(nodes));

                eventBus.publish("updateEditStep.update");
            }}
            value={value}>
                {
                    nodes.map(function(node, ind){
                        return <Radio 
                            key={node.auditor_id}
                            data-key={node.auditor_id}
                            value={node.auditor_id}
                            data-path={path+'.nodes.'+ind}
                            data-step={path}
                            data-nodeind={ind}
                            className="re-select"
                            >
                                <JstempApproveStepsAuditor
                                    item={node}
                                    ind={ind}
                                    step_type={step_type}
                                    tplData={tplData}
                                ></JstempApproveStepsAuditor>
                            </Radio>
                    })
                }
        </Radio.Group>
}

//对应原模板 jstemp-approve-auditor-and
//多人并行
function JstempApproveAuditorAnd({
    item,//step.nodes 当前步骤所有审批人
    step,//当前步骤
    path,
    step_type,
    onNodesChange,
    tplData,
    actual_steps
}){

    if(step.stepAttrs.adjust_multi_auditor && path != 0){//允许调整责任人，且不是第一个步骤
        let checkedList = [];
        item.map(function(nodeItem){
            if(nodeItem.Checked){//tplData.ProcessInfo.MultiUserSelect
                checkedList.push(nodeItem.auditor_id);
            }
        });

        /*可编辑模式下，展示CheckBox */
        return <Checkbox.Group
                value={checkedList}
                onChange = {
                    (e)=>{
                        onNodesChange({
                            e: e,
                            nodes: item,
                            step: step,
                            actual_steps: actual_steps
                        }
                    )}
                }
                className="auditor_and_wrap">
                {
                    item.map(function(node, ind){
                        return <div className="inline-block mr-1 mt-10px" 
                            data-key={node.auditor_id}
                            key={node.auditor_id}>
                            <Checkbox
                                value={node.auditor_id}
                                data-nodeind={ind}
                            >
                                <JstempApproveStepsAuditor
                                    item={node}
                                    ind={ind}
                                    step_type={step_type}
                                    tplData={tplData}
                                ></JstempApproveStepsAuditor>
                            </Checkbox>
                            {
                                /*这个是 + 号*/
                                (ind < item.length - 1)
                                && <div className="and_icon"></div>
                            }
                        </div>
                    })   
                }
        </Checkbox.Group>
    }else{
        //不可调整责任人，直接返回头像和名字
        return <ul className="auditor_and_wrap">
            {
                item.map(function(node, ind){
                    return <li 
                            data-key={node.auditor_id}
                            key={node.auditor_id}
                        >
                        <JstempApproveStepsAuditor
                            des="审批人头像和名字信息"
                            item={node}
                            ind={ind}
                            step_type={step_type}
                            tplData={tplData}
                        ></JstempApproveStepsAuditor>
                        {
                            (ind < item.length - 1)
                            && <div className="and_icon"></div>
                        }
                    </li>
                })   
            }
        </ul>
    }
   
}